<template>
  <MainFrame>
    <div slot='content'>
      <div class="top-title">
        用户列表
      </div>
      <div class="page">
        <div class="top" style="margin-bottom: 10px">
          <el-button type="primary" @click="addUser" icon="el-icon-plus">添加用户</el-button>
        </div>
        <el-table :data="items" border style="width: 585px; float: left;" stripe :default-sort="{prop: 'role'}" highlight-current-row @current-change="selectUser">
          <!-- <el-table-column prop="id" label="id" width="200">
          </el-table-column> -->
          <el-table-column prop="account" label="用户" width="200">
          </el-table-column>
          <el-table-column prop="role" label="角色" width="200">
            <template slot-scope="scope">
              <template v-if='scope.row.role==0'>系统管理员</template>
              <template v-if='scope.row.role==1'>管理员</template>
              <template v-if='scope.row.role==2'>普通用户</template>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" icon="el-icon-edit" @click='edit(scope.row)'>编辑</el-button>
              <!-- <el-button size="mini" @click='changePassword(scope.row)'>修改密码</el-button> -->
              <el-button size="mini" @click='onDeleteUser(scope.row)' type='danger'>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="float: left;">
          <div style="margin: 10px 20px;">用户管理台区</div>
          <el-table :data="userAreas" style="width: 400px; margin-left: 20px;">
            <el-table-column property="location" label="归属地"></el-table-column>
            <el-table-column property="areaNo" label="台区号"></el-table-column>
            <el-table-column property="address" label="台区地址"></el-table-column>
          </el-table>
        </div>
        <div style="clear: both;"></div>
      </div>
    </div>
  </MainFrame>
</template>
<script>
import MainFrame from '@/components/MainFrame';
import utils from '../ttJs/utils.js'
import { validateData } from '../ttJs/utils.js'
export default {
  components: {
    MainFrame,
  },
  data() {
    return {
      userRole: '-1',
      items: [],
      selectedUser: null,
      userAreas: []
    };
  },
  mounted: function() {
    self.userRole = sessionStorage.getItem('role');
    this.getItems()
  },
  methods: {
    getItems() {
      var self = this;
      var url = '/yitai/admin/user/list';
      var params = {};
      var success = function(response) {
        self.items = response.info;
      }
      var fail = function() {}
      var complete = function() {}
      utils.requestLoading(url, params, success, fail, complete)
    },
    onDeleteUser(item) {
      var self = this
      var event = function() {
        var params = { userId: item.id }
        var url = '/yitai/admin/user/delete';
        var success = function(response) {
          self.getItems()
        }
        var fail = function() {
          utils.fail('删除失败')
        }
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete)
      }
      utils.del(event, '是否删除此用户？')
    },
    addUser() {
      this.$router.push({ name: 'UserForm' })
    },
    edit(item) {
      this.$router.push({ name: 'UserForm', query: { id: item.id } })
    },
    changePassword(item) {
      var self = this
      this.$prompt('请输入密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        var url = '/yitai/admin/user/changePassword';
        if (value == '') {
          return
        }
        var pwd = utils.aesEncrypt(value)
        var params = {
          userId: item.id,
          password: utils.aesEncrypt(value)
        };
        var success = function(response) {
          if (response.status == 200) {
            self.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 5000
            });
          }
        }
        var fail = function() {}
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete)
      }).catch((error) => {});
    },
    selectUser(val) {
      this.selectedUser = val;
      this.getUserAreas(this.selectedUser.id);
    },
    getUserAreas(userId) {
      var self = this
      var url = '/yitai/admin/user/userAreas';
      var params = { userId: userId }
      var success = function(response) {
        var info = response.info;
        self.userAreas = info
      }
      var fail = function() {}
      var complete = function() {}
      utils.requestLoading(url, params, success, fail, complete)
    }
  }
}

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.top-title {
  font-size: 18px;
  font-weight: bold;
  padding: 0 20px;
}

.page {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

</style>
